<template>
    <div class="house-type-3">
        <img :src="houseData.image.url" alt="">
        <div class="explain">
            <div class="position">
                <i class="position_icon icon"></i>
                <span>{{ houseData.location }}</span>
            </div>
            <div class="name">{{ houseData.houseName }}</div>
            <div class="summary">{{ houseData.summaryText }}</div>
            <div class="price">
                <span class="now-price" v-unit>{{ houseData.finalPrice }}</span>
                <span class="before-price" v-unit>{{ houseData.productPrice }}</span>
                <span class="tip">{{ houseData.priceTipBadge?.text }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    houseData:{
        type:Object,
        default:() => ({})
    }
})
</script>


<style lang='less' scoped>
.house-type-3 {
    width: 48%;
    height: 100%;
    margin-bottom: 6px;
    img {
        border-radius: 10px;
        width: 100%;
    }
    .explain {
        padding: 6px;
        color: #888;
        .position {
            display: flex;
            align-items: center;
            font-size: 12px;
            .position_icon {
                background-image: url("@/assets/img/home/location.png");
                background-size: 100%;
            }
        }
        .summary {
            font-size: 13px;
            margin: 4px 0;
        }
        .name {
            font-size: 14px;
            color: #333;
            margin: 6px 0;
            // 两行文本溢出隐藏
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
        }
        .price {
            display: flex;
            align-items: center;
            .now-price {
                font-size: 16px;
                color: var(--primary-color);
            }
            .before-price {
                font-size: 12px;
                text-decoration-line: line-through;
                margin: 0 4px;
            }
            .tip {
                font-size: 12px;
                padding: 1px 6px;
                border-radius: 8px;
                color: #fff;
                background-color: #FF6666;
            }
        }
    }
}
</style>